<template>
    <div>
        <el-upload class="upload-demo" :accept="accept" drag :http-request="handleFileSelect" :before-upload="beforeUpload" :limit="1"
            v-if="!fileName">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                拖拽或 <em>上传Word文件</em>
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    请把方案的Word文件拖拽至此处上传
                </div>
            </template>
        </el-upload>

        <div class="editorContent" v-else>
            <div class="nav">
                <div class="file">
                    <div class="fileName">更换文件更换文件更换文件更换文件{{ fileName }}</div>
                    <el-upload class='upload-demo' :accept="accept" ref="upload" :http-request="handleFileSelect" :limit="1">
                        <el-button type='text'>
                            更换文件
                        </el-button>
                    </el-upload>
                </div>
                <div>
                    <el-button type="text" icon="DeleteFilled" @click="clearEditor">清空</el-button>
                    <el-button type="text" icon="View" @click="preview">预览</el-button>
                    <el-button type="text" icon="Promotion" @click="createScheme(createSchemeRef)">生成方案模板</el-button>
                </div>
            </div>
            <div class="editor">
                <Editor ref='editor' />
            </div>
            <Preview ref="previewRef" :html="html" />
            <CreateScheme ref='createSchemeRef' title="生成方案模板" :html="html" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from 'vue';
import mammoth from 'mammoth';
import Editor from './components/editor.vue'
import Preview from '@/components/preview/index.vue'
import CreateScheme from './components/createScheme.vue'

let resultValue = reactive({});
const fileName = ref('');
const editor = ref(null);
const upload = ref(null);
const previewRef = ref(null);
const html = ref('')
const createSchemeRef = ref(null)
const accept = ref('.docx')

onMounted(() => {
})


const handleFileSelect = function (event) {
    readFileInputEventAsArrayBuffer(event, arrayBuffer => {
        mammoth
            .convertToHtml({ arrayBuffer: arrayBuffer })
            .then(displayResult)
            .done();
    });
}
const readFileInputEventAsArrayBuffer = (event, callback) => {
    var file = event.file;
    var reader = new FileReader();
    reader.onload = function (loadEvent) {
        var arrayBuffer = loadEvent.target.result;
        callback(arrayBuffer);
    };
    reader.readAsArrayBuffer(file);
}
const displayResult = (result) => {
    resultValue = Object.assign(resultValue, result);
    nextTick(() => {
        upload.value.clearFiles();
        editor && editor.value.resetHtml(result.value);
    })
    // let resultValue = result.value;
    // var parser = new DOMParser();
    // var doc = parser.parseFromString(resultValue, 'text/html');
    // var nodes = Array.from(doc.querySelectorAll('*')).splice(3)
    // var headings = doc.querySelectorAll('h1, h2, h3, h4, h5, h6');
}
const beforeUpload = (res) => {
    fileName.value = res.name;
}

const clearEditor = () => {
    editor.value.resetHtml();
}

const preview = () => {
    html.value = editor.value.valueHtml;
    previewRef.value & previewRef.value.showdialog()
}

const createScheme = (createSchemeRef) => {
    html.value = editor.value.valueHtml;
    createSchemeRef.showdialog()
}


defineOptions({
  name: 'addScheme'
})
</script>

<style lang="scss" scoped>
.editorContent {
    height: 100%;
    display: flex;
    flex-direction: column;
    .nav {
        line-height: 32px;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 20px;
        display: flex;
        background-color: #fff;
        justify-content: space-between;
        .file {
            width: 200px;
            display: flex;
            .fileName {
                margin-right: 10px;
                max-width: 150px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
        .save {
            img {
                vertical-align: text-top;
            }

            span {
                font-size: 14px;
                margin-left: 3px;
            }
        }
    }
    ::v-deep .el-upload-list {
        display: none;
    }
    .editor {
        flex: 1;
        overflow: hidden;
    }
}
</style>